<template>
	<view class="container">
		<!-- 使用示例 -->
		<!-- 不展开 -->
		<mo-simple-date 
		:fold='true' 
		:active="true"
		@changeTime="changeTime" 
		@clickTime="clickTime" />

		<!-- 可展开 -->
		<view class="mt20">
			<mo-simple-date  
			:fold='fold'
			:active="true"
			:time="time"
			:select-time="selectTime"
			@changeTime="changeTime" 
			@clickTime="clickTime" 
			/>
		</view>
		<button class="mt20" type="primary" @click="fold=!fold">{{!fold?'收起':'展开'}}</button>

		<view class="mt20">
			<view class="colls now">当前</view>
			<view class="colls am">选中上午时间 0 - 12点</view>
			<view class="colls pm">选中下午时间 12 - 18点</view>
			<view class="colls act">同时选中上午和下午时间 0 - 18点</view>
		</view>

	</view>
</template>

<script>
    // import moSimpleDate from '@/components/mo-simple-date/mo-simple-date.vue'

	export default {
		components: {
			// moSimpleDate
		},
		data() {
			return {
				time: '2021-9-3',
				fold: false,
				selectTime: ['2021.07.6 10:32','2021.07.7 10:32','2021.07.8 10:32','2021.07.8 15:32','2021.07.09 15:32']
			}
		},
		methods: {
			changeTime(time){
				console.log('切换',time)
			},
			clickTime(time){
				this.selectTime.push(time.temps)
				console.log('点击日期',time)
			}
		}
	}
</script>

<style lang="scss" scoped>
	$theme-color: rgb(255, 165, 104);
	$am-color: rgb(8, 201, 95);
	$pm-color: rgb(235, 148, 35);
	$act-color: rgb(50, 105, 223);
	page{
		background: #f8f8f8;
	}
	.mt20{
		margin-top: 20rpx;
	}
	.container {
		padding: 0 20rpx;
	}
	.colls{
		position: relative;
		display: flex;
		align-items: center;
		padding: 5rpx 0;
		color: $theme-color;
		font-size: 24rpx;
		&::before{
			display: block;
			content: '';
			margin-top: 5rpx;
			margin-right: 10rpx;
			width: 20rpx;
			height: 20rpx;
			border-radius: 10rpx;
			background-color: $theme-color;
		}
		&.am{
			color: $am-color;
			&::before{
				background-color: $am-color;
			}
		}
		&.pm{
			color: $pm-color;
			&::before{
				background-color: $pm-color;
			}
		}
		&.act{
			color: $act-color;
			&::before{
				background-color: $act-color;
			}
		}
	}
</style>
